<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 400px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
    
    h3 {
      color: #24292e;
      margin-top: 0;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 8px;
    }
    
    button {
      width: 100%;
      padding: 8px 12px;
      margin: 5px 0;
      border: 1px solid #d1d5da;
      border-radius: 6px;
      background-color: #fafbfc;
      color: #24292e;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }
    
    button:hover {
      background-color: #f3f4f6;
      border-color: #bbb;
    }
    
    button#saveConfig {
      background-color: #2ea44f;
      color: white;
      border: 1px solid rgba(27, 31, 35, 0.15);
    }
    
    button#saveConfig:hover {
      background-color: #2c974b;
    }
    
    .config-section {
      margin: 10px 0 20px 0;
      padding: 15px;
      border: 1px solid #e1e4e8;
      border-radius: 6px;
      background-color: #fff;
    }
    
    .input-group {
      margin-bottom: 15px;
    }
    
    .input-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
      color: #24292e;
    }
    
    input {
      width: 100%;
      padding: 8px;
      margin: 5px 0;
      border: 1px solid #d1d5da;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 14px;
    }
    
    input:focus {
      border-color: #0366d6;
      outline: none;
      box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
    }
    
    .help-text {
      font-size: 12px;
      color: #586069;
      margin-top: 4px;
      line-height: 1.4;
    }
    
    .help-steps {
      background-color: #f6f8fa;
      border-radius: 4px;
      padding: 8px 12px;
      margin-top: 6px;
      font-size: 12px;
    }
    
    .help-steps ol {
      margin: 0;
      padding-left: 20px;
    }
    
    .help-steps li {
      margin: 4px 0;
      color: #444d56;
    }
    
    #result {
      margin-top: 10px;
      padding: 8px;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
    }
    
    .success {
      background-color: #dcffe4;
      color: #1a7f37;
    }
    
    .error {
      background-color: #ffebe9;
      color: #cf222e;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div class="config-section">
    <div class="header">
      <h3>Gitee 配置</h3>
    </div>
    <div class="input-group">
      <label>仓库地址</label>
      <input type="text" id="giteeRepo" placeholder="例: https://gitee.com/username/repo.git" />
      <div class="help-text">完整的 Gitee 仓库地址</div>
      <div class="help-steps">
        <ol>
          <li>访问你的 Gitee 仓库页面</li>
          <li>复制完整的仓库地址</li>
          <li>示例：https://gitee.com/username/repo.git</li>
        </ol>
      </div>
    </div>
    
    <div class="input-group">
      <label>访问令牌</label>
      <input type="password" id="giteeToken" placeholder="例: xxxxxxxxxxxxxxxxxxxxxx"/>
      <div class="help-text">用于访问仓库的私人令牌</div>
      <div class="help-steps">
        <ol>
          <li>访问 Gitee 设置页面</li>
          <li>点击左侧的"私人令牌"</li>
          <li>点击"生成新令牌"</li>
          <li>勾选 projects 权限</li>
          <li>生成并复制令牌（注意：令牌只显示一次）</li>
        </ol>
      </div>
    </div>
    
    <div class="input-group">
      <label>仓库文件路径</label>
      <input type="text" id="giteePath" placeholder="例: drawings/sketch.excalidraw" />
      <div class="help-text">文件在仓库中的保存位置</div>
      <div class="help-steps">
        <ol>
          <li>指定文件在仓库中的路径</li>
          <li>可以包含子目录，如：drawings/sketch.excalidraw</li>
          <li>必须以 .excalidraw 结尾</li>
          <li>不存在的目录会自动创建</li>
          <li>不要以斜杠(/)开头</li>
          <li>示例：drawings/sketch.excalidraw</li>
        </ol>
      </div>
    </div>
    
    <button id="saveConfig">保存配置</button>
  </div>

  <button id="syncToGitee">同步到 Gitee</button>
  <button id="pullFromGitee">从 Gitee 拉取</button>
  <div id="result"></div>
  <script src="popup.js"></script>
</body>
</html> 